<script setup lang="ts">
import { ref, inject } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import LoginModel from '../LoginModel.vue';
import axios from '../../plugins/axiosInstance'
import { isShowKey, switchLoginModelShowKey, popMessageKey, popMessage } from '@/type'
import { useStore } from '@store/index';
import { storeToRefs } from 'pinia';
import { checkLogoutNeedReturnToMainPage } from '@api';
const store = useStore()
const userInfo = storeToRefs(store).UserInfo
const router = useRouter()
const route = useRoute()
const navicat = ref(['发现音乐', '我的音乐', "关注", "个人中心"])
const switchShow = inject(switchLoginModelShowKey)
// 是否显示登录模态框
const isShow = inject(isShowKey)
const { isLogin } = storeToRefs(store)
const BaseUrl = store.getBaseUrl()
const Active = storeToRefs(store).activeTop
const popMessage = inject(popMessageKey) as popMessage
const logout = () => {
    axios.post(BaseUrl + "/user/logout")
        .then((res) => {
            if (res.data.code === 1) {
                store.Logout()
                popMessage('注销成功', 'success')
                if (checkLogoutNeedReturnToMainPage(route)) {
                    router.push('/')
                }
                store.delMyMusicList();
            }
        })
}
const routeTo = (index: Number) => {
    if (index === 0) {
        router.push('/')
        Active.value.active = true
        return;
    }
    if (isLogin.value !== 1) {
        popMessage('未登录', 'error')
        return;
    }
    switch (index) {
        case 1:
            router.push('/my/myMusic');
            Active.value.active = false

            break;
        case 2:
            router.push('/post');
            Active.value.active = false

            break;
        case 3:
            router.push({
                name: 'personCenter', params: {
                    userId: userInfo.value.id,
                    type: 'default'
                }
            })
            break;
        default:
            router.push('/')
    }
}

const kw = ref('')
const search = (e: any) => {

    if (e.key === 'Enter') {
        if (kw.value === null || kw.value === undefined || kw.value === '') {
            popMessage("搜索不能为空", 'error')
            return
        }
        router.push({
            name: 'Search',
            params: {
                kw: kw.value
            }
        })
    }
}
const toMoreMusicList = () => {
    router.push("/moreMusicList");
}
const toMainPage = () => {
    router.push("/");
}
const toMoreMusic = () => {
    router.push("/moreMusic");
}
</script>
<template>
    <div class="top">
        <div class="navicator">
            <div class="logo">
            </div>
            <div class="logoFont">
            </div>
            <ul>
                <li v-for="i, index in navicat" @click="routeTo(index)">{{ i }}</li>
            </ul>
            <div class="search">
                <input id="searchInput" type="text" v-model="kw" @keyup.enter="search($event)" placeholder="请输入/用户/歌名/歌手" />
            </div>
            <div class="login">
                <a @click="switchShow" v-if="isLogin === -1">登录</a>
                <a @click="logout" v-else-if="isLogin === 1">注销</a>
            </div>
        </div>
    </div>
    <div :class="{ bottom: Active.active, hidden: !Active.active }">
        <ul class="func" v-show="Active.active">
            <li>
                <a @click="toMainPage" :class="{ active: Active.item == 0 }">推荐</a>
            </li>
            <li>
                <a @click="toMoreMusicList" :class="{ active: Active.item == 1 }">歌单</a>
            </li>
            <li>
                <a @click="toMoreMusic" :class="{ active: Active.item == 2 }">单曲</a>
            </li>
            <div class="trangle"></div>
        </ul>
    </div>
    <LoginModel v-show="isShow" modelTitle="登录" firstPlaceholder="请输入账号" secondPlaceholder="请输入密码" buttonText="登录" />
</template>
<style scoped lang="css">
.func a {
    cursor: pointer;
}

.func .active {
    border-radius: 15px;
    padding: 2px 10px;
    border: 1px solid var(--red-style);
    background-color: var(--red-dark-style);
}

.trangle {
    position: absolute;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 8px solid var(--red-style);
    top: -8px;
    left: 25px;

}

.func li {
    list-style: none;
    line-height: 35px;
    margin-right: 36px;
    width: 52px;
    text-align: center;
}

.func {
    padding: 0;
    margin: 0;
    display: flex;
    width: 530px;
    margin: auto;
    color: white;
    font-size: 14px;
    position: relative;
}

.bottom {
    height: 35px;
    width: 100vw;
    background-color: var(--red-style);
    position: relative;
}

.hidden {
    height: 5px;
    width: 100vw;
    background-color: var(--red-style);
}

.logoFont {
    background: url("../../assets/image/yugu-white.png");
    background-size: cover;
    width: 65px;
    height: 48px;
    margin: 0 15px;
}

.logo {
    background: url("../../assets/image/logo.png");
    background-size: cover;
    width: 40px;
    height: 40px;
}

.login input {
    height: 10px;
}

.search input {
    text-indent: 5px;
}

.top {
    color: white;
    width: 100%;
    height: var(--top-header);
    background-color: rgb(27, 27, 27);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top ul {
    display: flex;
    padding: 0;
    margin: 0;
    flex: 5;
}

.top li {
    height: var(--top-header);
    flex: 2;
    list-style: none;
    text-align: center;
    line-height: var(--top-header);
    cursor: pointer;
}

.top input {
    display: inline;
}

.top li:hover {
    background-color: #242424;
}

.navicator {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    width: calc(var(--content-width) - 100px);
    align-items: center;
}

.navicator .search {
    display: flex;
    align-items: center;
    vertical-align: middle;
    justify-content: center;

    flex: 2;
}

.navicator .search input {
    border: 1px solid #ccc;
    height: 20px;
    border-radius: 10px;
    outline: none;
}

.navicator .login {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.navicator .login a {
    cursor: pointer;
    display: inline;
}
</style>